import React, { Component } from 'react'
import { Redirect } from 'react-router-dom'
import { connect } from 'react-redux'
import { login } from '../../redux/action'
import {
  NavBar,
  List,
  InputItem,
  WingBlank,
  Button,
  WhiteSpace
} from 'antd-mobile'

import Logo from './../logo/logo'
class Login extends Component {
  constructor(props) {
    super(props)
    this.state = {
      username: '',
      password: '',
      type: 'dashen'
    }
    this.handleChange = this.handleChange.bind(this)
    this.toRegister = this.toRegister.bind(this)
    this.toLogin = this.toLogin.bind(this)
  }
  handleChange(keys, val) {
    this.setState({
      [keys]: val
    })
  }
  toLogin() {
    this.props.login(this.state)
  }
  toRegister() {
    this.props.history.replace('register')
  }
  render() {
    const { redirectTo, msg } = this.props
    if (redirectTo) {
      return <Redirect to={redirectTo} />
    }
    return (
      <div>
        <NavBar>硅谷直聘</NavBar>
        <Logo />
        <WingBlank />
        {msg ? <p className="error-msg">{msg}</p> : null}
        <List>
          <InputItem
            placeholder="输入用户名"
            onChange={val => this.handleChange('username', val)}
          >
            用户名:
          </InputItem>

          <WingBlank />
          <InputItem
            placeholder="输入密码"
            type="password"
            onChange={val => this.handleChange('password', val)}
          >
            密码
          </InputItem>
          <WingBlank />
          <Button type="primary" onClick={this.toLogin}>
            登&nbsp;&nbsp;&nbsp;陆
          </Button>
          <WhiteSpace />
          <Button type="primary" onClick={this.toRegister}>
            注册账号
          </Button>
        </List>
      </div>
    )
  }
}

export default connect(
  state => state.user,
  { login }
)(Login)
